#{extends 'main.html' /}
#{set title:'cityPlaces.html' /}

#{set 'moreStyles'}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/mainPages.css'}">
<link rel = "stylesheet" media = "screen" href = "@{'/public/stylesheets/myTripGmap.css'}">
<link rel = "stylesheet" media = "screen" href = "@{'/public/stylesheets/tab.css'}">
<link rel = "stylesheet" media = "screen" href = "@{'/public/stylesheets/paginationstyle.css'}">
#{/set}


<div class="mainContent" id="citiesPages">

<div class="cities">
   
       <div id="beenCityContainer" class="cityContainer">
        <div class ="cityContainerHeader"><h2>Been Cities</h2></div>
        
        <div class ="cityContainerList">
             <div id="paging_container0">
             <ul class="content">
					 
				</ul>	
				
				<div class="page_navigation"></div>
             
             </div>        
        </div>
       </div>
        
       <div id="goCityContainer" class = "cityContainer">
         <div class ="cityContainerHeader"><h2>Go  Cities</h2></div>
         <div class ="cityContainerList">
             <div id="paging_container1">
             <ul class="content">
					 
				</ul>	
				
				<div class="page_navigation"></div>
             
             </div>
         </div>
       </div>
       <div id="favoriteCityContainer" class = "cityContainer">
         <div class ="cityContainerHeader"><h2>Favorite Cities</h2></div>
         <div class ="cityContainerList">
           <div id="paging_container2">
             <ul class="content">
					 
				</ul>	
				
				<div class="page_navigation"></div>
             
             </div>
         </div>
       </div>
</div>


<div id="succecsMessage">
      <span></span> 
 </div>
<div id ="mapContent" style ="width :270px; height:400px; background:red">
    
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>

<div id="userPlaceTabContainer">
    <ul class="tabs">
    <li><span id="#seetab">See</span></li>
    <li><span id="#eattab" id="showMap">Eat</span></li>
    <li><span id="#staytab">Stay</span></li>
    </ul>
<!-- Start tab container -->
<div class="tab_container">

    <div id="seetab" class="tab_content">
            <div class = "userPlaceHeder" ><h2>About</h2></div>
            <div id= "seeUserPlace" class ="userPlaceContainer">
              <li id="2" lat="" lng ="" class="onePlace"><p>location 2</p></li>
            </div>
    </div>
     <div id="eattab" class="tab_content">
		<div class = "userPlaceHeader"><h2>Deneme</h2></div>
           <div id= "eatUserPlace" class ="userPlaceContainer">
             <li id="1" lat="" lng ="" class="onePlace"><p>location 1</p></li>
           </div>
    </div>
     <div id="staytab" class="tab_content">
		<div class ="userPlaceHeader"><h2>Contact</h2></div>
            	 <div id= "stayUserPlace" class ="userPlaceContainer">
              <li id="3" lat="" lgt ="" class="onePlace"><p>location 3</p></li>                
             </div>
    </div>
</div>
    <div style="clear: both; display: block; padding: 10px 0; text-align:center;">
</div>
</div>
</div>


#{set 'moreScripts'} 


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBt7zoJK9vf2W3n1WxbXl5IyqYeCqadZzM&sensor=true"></script>
<script src ="@{'/public/javascripts/json2.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/ApplicationConstants.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/applicationRequest.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src = @{'/public/javascripts/jquery.pajinate.js'} type = "text/javascript" charset = "utf-8"></script>
<script src ="@{'/public/javascripts/gmapUtil.js'}"  type = "text/javascript" charset="utf-8"></script>

<script type="text/javascript"  charset = "utf-8">
      
      $appRequest.requestUserId = ${currentUser.getFacebookID()}    
      activeCurrentLink(1);
     tabPaneInitializing();
     
</script>
<script type = "text/javascript" charset = "utf-8">
var beenCitiesLi = new Array();
var favoriteCitiesLi = new Array();
var goCitiesLi = new Array();
var cityId;
var lat;
var lgt;
var cityName;
var cityLiElement;
var cityType;
 #{list items:userCities, as:'oneUserCity'}
 
                    cityId = ${oneUserCity.getId()}
                    lat = ${oneUserCity.getPlaceInfo().getCordinate().getLatitude()}
                    lgt = ${oneUserCity.getPlaceInfo().getCordinate().getLongitude()}
                    cityName = "${oneUserCity.getCityName()}";
                    cityLiElement = createLiElemenForCities(cityId,lat,lgt,cityName); 
                 #{list items:oneUserCity.getCityType(oneUserCity), as:'cityType'}
                      cityType = ${cityType.getcityType()};
                      if(cityType == 0){
                         beenCitiesLi.push(cityLiElement);        
                      }
                 
                      if(cityType == 2){
                         favoriteCitiesLi.push(cityLiElement.clone());
                      }
                      if(cityType == 1){
                        goCitiesLi.push(cityLiElement.clone());
                      }   
                 
                    #{/list}                
             #{/list}
    
   
    
    while(beenCitiesLi.length > 0 ){
         $("#beenCityContainer .content").prepend(beenCitiesLi.pop());
        }
        
   
    
        
    while(goCitiesLi.length > 0){
    $("#goCityContainer  content").prepend(goCitiesLi.pop());
    }   
     while(favoriteCitiesLi.length > 0){
    $("#favoriteCityContainer  .content").prepend(favoriteCitiesLi.pop());
    }   
    
   
</script>

<script src ="@{'/public/javascripts/cities.js'}"  type = "text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#paging_container0').pajinate();
$('#paging_container1').pajinate();
$('#paging_container2').pajinate();
</script>
#{/set} 